<template>
  <div class="m-content">
    <h1>欢迎来到布小星的{{title}}</h1>
    <div v-if="flag"><i class="iconfont iconshuangjiantouyou"></i><span class="back" @click="back">首页</span><i class="iconfont iconshuangjiantouyou"></i>博客</div>
    <!-- <div class="ball"></div> -->
  </div>

</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        title: '个人网站',
        flag: false
      }
    },
    methods: {
      back(){
        this.$router.push("/blog")
      }
    },
    watch: {
      $route: {
        handler: function (route){
        
          if(route.name!="Newest"){
            this.flag = true
          }else{
            this.flag = false
          }
        },
        immediate: true
      }
        
    }
    
  }
</script>

<style lang="scss" scoped>

  .m-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: .37037rem;
    padding: .37037rem 0;
    h1{
      color: #567;
      font-size: 0.35rem;
    }
    div{
      color: #567;
      font-size: 0.3rem;
      i{
        margin: 0.2rem;
      }
      .back:hover{
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }
  .ball {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    animation-name: bounce;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }

  @keyframes bounce{
    0% {
      top: 0px;
    }
    50% {
      top: 249px;
      width: 130px;
      height: 70px;
    }
    100% {
      top: 0px;
    }
  }

</style>